import React, { PureComponent } from 'react';
import {View, Animated, Dimensions} from 'react-native';
const {width: scrollWidth} = Dimensions.get('window');

class Circle extends PureComponent{
    state = {
        circle_1: new Animated.Value(0),
    }

    componentDidMount() {

        let intervalTime = this.props.time || 5000;

        const animate = () => {
            Animated.timing(this.state.circle_1, {
                toValue: 1,
                duration: intervalTime,
                useNativeDriver: false
            }).start();
            animateInter();
        }

        const animateInter = () => {
            let timer = setTimeout(() => {
                clearTimeout(timer);
                Animated.timing(this.state.circle_1, {
                    toValue: 0,
                    duration: 0,
                    useNativeDriver: false
                }).start();
                animate();
            }, intervalTime)

        }

        setTimeout(() => {
            animate();
            animateInter();
        },this.props.delay || 0)
    }

    componentWillUnmount() {
        if(this.interval)clearInterval(this.interval);
    }

    render(){
        return (
            <View style={{
                justifyContent: 'center',
                alignItems: 'center',
                width: '100%',
                height:'100%',
                position: 'absolute',
                top:0,
                left:0,
                zIndex: 9999
            }}>
                <Animated.View style={{
                    width: this.state.circle_1.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, scrollWidth]
                    }),
                    height:this.state.circle_1.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, scrollWidth]
                    }),
                    opacity: this.state.circle_1.interpolate({
                        inputRange: [0, 1],
                        outputRange: [1, 0]
                    }),
                    borderWidth: 1,
                    borderRadius: 100000,
                    borderColor: 'rgba(255,205,205, 0.3)'
                }}/>

            </View>
        )
    }
}

export  default  Circle;
